<template>
  <section class="profile">
    <header-top title="我的"></header-top>

    <section class="profile-number">
      <router-link :to="userInfo._id ? '/userInfo' : '/login'" class="profile-link">
        <div class="profile_image">
          <i class="iconfont iconren"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top" v-if="!userInfo.phone">{{ userInfo.name || '登录/注册' }}</p>
          <p>
            <span class="user-icon">
              <i class="iconfont icon-shouji iconshouji"></i>
            </span>
            <span class="icon-mobile-number">{{ userInfo.phone || '暂无绑定手机号'}}</span>
          </p>
        </div>
        <span class="arrow">
          <i class="iconfont icon-jiantou1"></i>
        </span>
      </router-link>
    </section>
    <section class="profile_info_data border-1px">
      <ul class="info_data_list">
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0.00</span>元</span>
          <span class="info_data_bottom">我的余额</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>个</span>
          <span class="info_data_bottom">我的优惠</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>分</span>
          <span class="info_data_bottom">我的积分</span>
        </a>
      </ul>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 我的订单 -->
      <a href='javascript:' class="my_order">
        <span>
          <i class="iconfont icon-order-s"></i>
        </span>
        <div class="my_order_div">
          <span>我的订单</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
      <!-- 积分商城 -->
      <a href='javascript:' class="my_order">
        <span>
          <i class="iconfont icon-jifen"></i>
        </span>
        <div class="my_order_div">
          <span>积分商城</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
      <!-- 硅谷外卖会员卡 -->
      <a href="javascript:" class="my_order">
        <span>
          <i class="iconfont icon-vip"></i>
        </span>
        <div class="my_order_div">
          <span>硅谷外卖会员卡</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 服务中心 -->
      <a href="javascript:" class="my_order">
        <span>
          <i class="iconfont icon-fuwu"></i>
        </span>
        <div class="my_order_div">
          <span>服务中心</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
    </section>

    <section class="profile_my_order border-1px">
      <mt-button type="danger" style="width: 100%" v-if="userInfo._id" @click="logout()">退出登录</mt-button>
    </section>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import { MessageBox, Toast } from 'mint-ui'
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'

export default {
  name: 'Profile',
  components: {
    HeaderTop
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    logout() {
      MessageBox.confirm('确认退出吗？').then(
        action => {
          // 请求退出
          this.$store.dispatch('logout')
          Toast('退出完成')
        },
        action => {
          console.log('点击了取消')
          Toast('取消完成')
        }
      )
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '../../common/stylus/mixins.styl'
    .profile //我的
        width 100%
        overflow hidden
        .header
            background-color #02a774
            position fixed
            z-index 100
            left 0
            top 0
            width 100%
            height 45px
            .header_search
                position absolute
                left 15px
                top 50%
                transform translateY(-50%)
                width 10%
                height 50%
                .icon-sousuo
                    font-size 25px
                    color #fff
            .header_title
                position absolute
                top 50%
                left 50%
                transform translate(-50%, -50%)
                width 50%
                color #fff
                text-align center
                .header_title_text
                    font-size 20px
                    color #fff
                    display block
            .header_login
                font-size 14px
                color #fff
                position absolute
                right 15px
                top 50%
                transform translateY(-50%)
                .header_login_text
                    color #fff
        .profile-number
            margin-top 45.5px
            .profile-link
                clearFix()
                position relative
                display block
                background #02a774
                padding 20px 10px
                // padding 70px 10px
                .profile_image
                    float left
                    width 60px
                    height 60px
                    border-radius 50%
                    overflow hidden
                    vertical-align top
                    .iconren
                        background #e4e4e4
                        font-size 64px
                .user-info
                    float left
                    margin-top 8px
                    margin-left 15px
                    p
                        font-weight: 700
                        font-size 18px
                        color #fff
                        &.user-info-top
                            padding-bottom 8px
                        .user-icon
                            display inline-block
                            margin-left -15px
                            margin-right 5px
                            width 20px
                            height 20px
                            .icon-mobile
                                font-size 30px
                                vertical-align text-top
                        .iconshouji
                            font-size 18px
                            color #fff
                            padding-left 10px
                .arrow
                    width 12px
                    height 12px
                    position absolute
                    right 15px
                    top 40%
                    .iconarrow-right
                        color #fff
                        font-size 20px
        .profile_info_data
            bottom-border-1px(#e4e4e4)
            width 100%
            background #fff
            overflow hidden
            .info_data_list
                clearFix()
                .info_data_link
                    float left
                    width 33%
                    text-align center
                    border-right 1px solid #f1f1f1
                    .info_data_top
                        display block
                        width 100%
                        font-size 14px
                        color #333
                        padding 15px 5px 10px
                        span
                            display inline-block
                            font-size 30px
                            color #f90
                            font-weight 700
                            line-height 30px
                    .info_data_bottom
                        display inline-block
                        font-size 14px
                        color #666
                        font-weight 400
                        padding-bottom 10px
                .info_data_link:nth-of-type(2)
                    .info_data_top
                        span
                            color #ff5f3e
                .info_data_link:nth-of-type(3)
                    border 0
                    .info_data_top
                        span
                            color #6ac20b
        .profile_my_order
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff
            .my_order
                display flex
                align-items center
                padding-left 15px
                >span
                    display flex
                    align-items center
                    width 20px
                    height 20px
                    >.iconfont
                        margin-left -10px
                        font-size 22px
                    .icon6
                        color #02a774
                    .iconjifen
                        color #ff5f3e
                    .iconhuiyuan
                        color #f90
                    .iconfuwu-active
                        color #02a774
                .my_order_div
                    width 100%
                    border-bottom 1px solid #f1f1f1
                    padding 18px 10px 18px 0
                    font-size 16px
                    color #333
                    display flex
                    justify-content space-between
                    span
                        display block
                    .my_order_icon
                        width 10px
                        height 10px
                        .icon-jiantou1
                            color #bbb
                            font-size 10px
</style>

